<template>
	<!--供应商报价单-->
	<view class="page-content">
		<view class="page-top">
			<!-- 导航栏 agents导航栏标题 -->
			<nav-tab ref="navTab" :tabTitle="tabTitle" @changeTab='changeTab' :active="currentTab" fontS="36" afontS="36" fontW="600">
			</nav-tab>
		</view>
		<!-- swiper切换 swiper-item表示一页 scroll-view表示滚动视窗  @scrolltolower="lower1"-->
		<swiper class="page-body" :current="currentTab" @change="swiperTab">
			<swiper-item  v-for="(item,index) in objlist" :key="index">
				<scroll-view style="height: 100%;" scroll-y="true" scroll-with-animation
					:scroll-into-view="toView">
					<template v-if="currentTab === 0">
						<view class="body-item">
							<view class="input-row">
								<view class="input-row-t"><text class="required">*</text>手机号码：</view>
								<input class="input-row-w" type="text" v-model="params.mobile" placeholder="请输入手机号码"
									placeholder-style="color:#ddd"></input>
							</view>
							<view class="input-row">
								<view class="input-row-t"><text class="required">*</text>昵称：</view>
								<input class="input-row-w" type="text" v-model="params.name" placeholder="请输入用户名称"
									placeholder-style="color:#ddd"></input>
							</view>
							<view class="input-row">
								<view class="input-row-t">系统小组：</view>
								<view class="row-sel-box" @tap="toggleTab('selectxl')">
									<view class="sel_name" :style="{color:params.groupname==='请选择'?'#ddd':'#333'}">
										{{params.groupname}}
									</view>
									<view class="icons icon-gengduo"></view>
								</view>
							</view>
							<view class="box-button" @click="confirm">确认</view>
						</view>
					</template>
					<template v-if="currentTab === 1">
						<view class="body-item">
							<view class="input-row">
								<view class="input-row-t"><text class="required">*</text>手机号码：</view>
								<input class="input-row-w" type="text" v-model="params2.mobile" placeholder="请输入手机号码"
									placeholder-style="color:#ddd"></input>
							</view>
							<view class="input-row">
								<view class="input-row-t"><text class="required">*</text>昵称：</view>
								<input class="input-row-w" type="text" v-model="params2.name" placeholder="请输入用户名称"
									placeholder-style="color:#ddd"></input>
							</view>
							<view class="input-row">
								<view class="input-row-t">供应商：</view>
								<view class="row-sel-box" @tap="toggleTab('selectxl')">
									<view class="sel_name" :style="{color:params2.groupname==='请选择'?'#ddd':'#333'}">
										{{params2.groupname}}
									</view>
									<view class="icons icon-gengduo"></view>
								</view>
							</view>
							<view class="switch-row">
								<view class="switch-row-l">是否开启管理功能</view>
								<switch @change="switchChange2" color="#198FFF" style="transform:scale(0.7)" />
							</view>
							<view class="box-button" @click="confirm">确认</view>
						</view>
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>
		<w-picker mode="selector" defaultVal="" @confirm="onSelctXL" ref="selectxl" themeColor="#f00"
			:selectList="currentTab===0?label1:label2"></w-picker>
			<!--编辑框-->
			<w-popup :show="showtip" :type="type1" @change="change1">
				<view class="w-tip">
					<view class="w-tit">提示</view>
					<view class="w-con">
						<view class="txt-row">未设置分组，是否去设置分组？</view>
					</view>
					<view class="w-but">
						<view class="w-but-txt" @click="cancel('tip')">取消</view>
						<view class="w-but-txt" @click="confirm2">确认</view>
					</view>
				</view>
			</w-popup>
	</view>
</template>

<script>
	const util = require('../../common/util2.js');
	import refresh from '@/components/w-refresh/refresh.vue';
	import navTab from '@/components/w-navTab/navTab2.vue';
	import wPicker from "@/components/w-picker/w-picker.vue"
	import wPopup from '@/components/w-popup/w-popup2.vue'; // 弹窗
	import {
		mapGetters,
		mapActions
	} from "vuex";
	import {
		getGroupLists, //分组
		invitationUsers, //邀请个人
	} from '@/common/api.js';
	export default {
		components: {
			refresh,
			navTab,
			wPicker,
			wPopup
		},
		data() {
			return {
				currentPage: 'index',
				toView: '', //回到顶部id
				tabTitle: ['公司', '供应商'], //导航栏格式 --导航栏组件
				currentTab: 0, //sweiper所在页
				objlist:[[{id:1}],[{id:2}]],
				pageType: '', //页面类型 popcz-POP材质
				showtip: false, //是否显示弹窗2
				content1: '顶部弹 popup',
				type1: '', //弹窗显示方式
				tipType:'',
				params: {
					company_id: '',
					mobile: '',
					name: '',
					type:'1',
					groupname: '请选择',
					group_id:''
				},
				params2: {
					company_id: '',
					mobile: '',
					name: '',
					type:'2',
					groupname: '请选择',
					group_id:'',
					statu: false
				},
				formdata: {
					company_id: '',
					type: ''
				},
				label1: [{
					label: "公司成员",
					value: 1
				}],
				label2: [{
					label: "公司成员",
					value: 1
				}],
				type:'',
			}
		},
		computed: {
			...mapGetters(['companyInfo', 'userInfo']),
		},
		onLoad(option) {
			console.log(222, option)
			this.formdata.company_id = this.companyInfo.id;
			this.params.company_id = this.companyInfo.id;
			this.params2.company_id = this.companyInfo.id;
			if (option.pageType) {
				this.pageType = option.pageType
			}
			if(option.type){
				if(option.type === 'c'){
					this.type === option.type;
					this.currentTab = 0;
					if(option.phones){
						this.params.mobile = option.phones;
					}
					if(option.name){
						this.params.name = option.name;
					}
				}else if(option.type === 'd'){
					this.type === option.type;
					this.currentTab = 1;
					if(option.phones){
						this.params2.mobile = option.phones;
					}
					if(option.name){
						this.params2.name = option.name;
					}
				}
			}
		},
		onNavigationBarButtonTap(e) {
			console.log(23, e)
			if (e.index === 0) {
				console.log(444)
				uni.navigateTo({
					url: `/pages/contact/contactSearch?type=${this.currentTab}`
				})
			}
		},
		onShow() {
			this.getdata();
		},
		methods: {
			// swiper 滑动
			swiperTab: function(e) {
				var index = e.detail.current //获取索引
				this.$refs.navTab.longClick(index);
			},
			switchChange2(e){
				console.log(123,e)
			},
			toggleTab(str, index) {
				if(this.currentTab === 0){
					if(this.label1 && this.label1.length>0){
						this.selecl_num = index;
						this.$refs[str].show();
					}else{
						this.showtip = true;
						this.content1 = 'center';
						this.type1 = 'center';
					}
				}else if(this.currentTab === 1){
					if(this.label2 && this.label2.length>0){
						this.selecl_num = index;
						this.$refs[str].show();
					}else{
						this.showtip = true;
						this.content1 = 'center';
						this.type1 = 'center';
					}
				}
				
				
			},
			//下拉选择
			onSelctXL(e) {
				console.log(1,e)
				if(this.currentTab === 0){
					this.params.groupname = e.result;
					this.params.group_id = e.checkArr.id;
				}else if(this.currentTab === 1){
					this.params2.groupname = e.result;
					this.params2.group_id = e.checkArr.id;
				}
				 
			},
			confirm(){
				if(this.currentTab === 0){
					if(this.params.mobile === ''){
						uni.showToast({
							title:'手机号码不能为空！',
							icon:'none',
							duration:2000
						})
						return
					}
					invitationUsers(this.params).then(res =>{
						if(res.code === 2000){
							uni.showToast({
								title:'邀请成功！',
								icon:'none',
								duration:2000
							})
							this.$util.prePage().resdata();
							setTimeout(() => {
								uni.navigateBack();
							}, 500)
						}else{
							uni.showToast({
								title:res.msg,
								icon:'none',
								duration:2000
							})
						}
					})
				}else if(this.currentTab === 1){
					if(this.params2.mobile === ''){
						uni.showToast({
							title:'手机号码不能为空！',
							icon:'none',
							duration:2000
						})
						return
					}
					invitationUsers(this.params2).then(res =>{
						if(res.code === 2000){
							uni.showToast({
								title:'邀请成功！',
								icon:'none',
								duration:2000
							})
							this.$util.prePage().resdata();
							setTimeout(() => {
								uni.navigateBack();
							}, 500)
						}else{
							uni.showToast({
								title:res.msg,
								icon:'none',
								duration:2000
							})
						}
					})
				}
				
			},
			resdata() {
				this.getdata();
			},
			//获取当前比赛数据
			getdata(formData) {
				getGroupLists({
					company_id: this.formdata.company_id,
					type: 1
				}).then(res => {
					if (res.code === 2000) {
						if (res.data && res.data.length > 0) {
							res.data.forEach(item => {
								this.$set(item, 'label', item.name)
							})
						}
						this.label1 = res.data;
					}
				})
				getGroupLists({
					company_id: this.formdata.company_id,
					type: 2
				}).then(res => {
					if (res.code === 2000) {
						if (res.data && res.data.length > 0) {
							res.data.forEach(item => {
								this.$set(item, 'label', item.name)
							})
						}
						this.label2 = res.data;
					}
				})
			},
			changeTab(index) {
				console.log(index)
				this.currentTab = index;
				
				console.log(332)
				if(this.type === 'c'){
					this.currentTab = 0;
				}else if(this.type === 'd'){
					console.log(333)
					this.currentTab = 1;
				}
			},
			confirm2() {
				if(this.currentTab === 0){
					uni.navigateTo({
						url:`/pages/contact/editTeams?type=c`
					})
				}else if(this.currentTab === 1){
					uni.navigateTo({
						url:`/pages/contact/editTeams?type=d`
					})
				}
			},
			//取消
			cancel() {
				this.show = false
				this.showtip = false
			},
			change1(e) {
				if (!e.show) {
					this.showtip = false
				}
			},
		}
	};
</script>

<style lang="scss">
	/* 提示窗口 */
	.w-tip {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		width: 70vw;
		border-radius: 10rpx;
		background-color: #fff;
		box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0, 0, 0, 0.1);
		margin: 30rpx auto 0;
	
		.w-tit {
			font-size: 36rpx;
			font-weight: bold;
			color: $font-color-3;
			line-height: 60rpx;
			height: 60rpx;
			margin-top: 20rpx;
			text-align: center;
		}
	
		.w-but {
			display: flex;
			font-size: 32rpx;
			font-weight: 400;
			color: $font-color-b3;
			height: 84rpx;
			line-height: 84rpx;
	
			.w-but-txt {
				flex: 1;
				text-align: center;
				border-right: 1rpx solid #f5f5f5;
			}
	
			.w-but-txt:last-of-type {
				border-right: none;
			}
		}
	
		.w-con {
			display: flex;
			text-align: center;
			font-weight: 400;
			padding: 30rpx 30rpx;
			border-bottom: 1rpx solid #f5f5f5;
	
			.txt-row {
				width: 100%;
				text-align: center;
				font-size: 28rpx;
				color: $font-color-9;
			}
		}
	}
	.required {
		color: #FE5252;
		font-size: 28rpx;
	}

	.page-content {
		width: 100vw;
		height: 100%;
		font-size: 28upx;
		display: flex;
		flex-direction: column;
		background: $uni-bg-color;

		.page-body {
			height: calc(100% - 90rpx);
			padding: 0 30rpx;
		}

		.page-top {
			display: flex;
			flex-direction: column;
			box-sizing: content-box;
			background: $uni-bg-color-grey;
			display: block;
			position: sticky;
			top: 0rpx;
			z-index: 2;
			border-bottom: 1rpx solid #F2F4F5;
		}
	}

	.body-item {
		display: flex;
		flex-direction: column;
		height: 100%;
		.box-button{
			margin-top: 60rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			background: $uni-but-bg-color;
			color: $font-color-w;
			box-shadow: 4rpx 8rpx 16rpx rgba(25, 143, 255, 0.25);
			border-radius: 10rpx;
		}
		.switch-row{
			height: 100rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			width: 100%;
			flex-direction: row;
			border-bottom: 1rpx solid #f5f5f5;
			background: $uni-bg-box-color;
			.switch-row-l{
				font-size: 32rpx;
				font-weight: 400;
				color: $font-color-3;
			}
		}
	
		.input-row {
			height: 100rpx;
			display: flex;
			align-items: center;
			width: 100%;
			flex-direction: row;
			border-bottom: 1rpx solid #f5f5f5;
			background: $uni-bg-box-color;
			.row-sel-box{
				width: 100%;
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.sel_name{
					font-size: 32rpx;
					font-weight: 400;
				}
				.icons{
					color: $font-color-9;
				}
			}
					
			.input-row-w {
				display: flex;
				flex: 1;
				width: 100%;
				height: 80rpx;
				color: $font-color-3;
				font-size: 28rpx;
				border: 1rpx solid #fff;
			}
			.input-row-t{
				font-size: 32rpx;
				color: #333333;
			}
		}
	}
</style>
